<template>
  <div id="app">


    <h2>App内容。。。。。。。。。</h2>
    <!-- 在这里是要通过变量进行传递，所以需要绑定 -->
<!--     <HelloVuex :counter="counter"></HelloVuex>
 --><!-- 在这里是存在父子组件关系，所以可以通过通信的方式进行变量共享
      假如不存在呢，两个组件之间不存在任何关系呢
   -->

   <!-- 

     这时候 就可以使用vuex了
    -->
    <!-- 因为main.js里面注册了 vuex，所以这里可以使用里面state的变量了 -->
    <h2>{{$store.state.counter}}</h2>

<!-- 通过这种方式改变 vuex中的状态值  行得通，但是官方不推荐 -->
    <button @click="subtraction">-</button>
    <button @click="addition">+</button>


<h2>Hello Vuex内容----------</h2>
<HelloVuex1></HelloVuex1>


<h2>--------App内容：getter相关信息------------</h2>
  <!-- 但是这样太傻逼了， -->
  <h2>{{$store.state.counter*$store.state.counter}}</h2>
  <!-- 可以这样写 -->
  <h2>{{$store.getters.powerCounter}}</h2>

<!-- 通过当前计算属性 来对store的state拿到的熟悉值进行操作 -->
<!-- 但是如果别的组件也需要这中操作，拷贝代码的做法就太垃圾了 -->
<h2>{{selecrStundent}}</h2>
 

 <!-- 当你以后想要从state拿数据，并且这个数据是需要经过变化之后再给别人拿的，这种情况下
 一般都会定义对应的getters，然后再getters里面对数据进行一些处理  -->
<!-- 通过vuex中的gettter属性来对state里面的数据进行操作 -->
<h2>{{$store.getters.selecetStudent}}</h2>

<h2>{{$store.getters.getCounr}}</h2>


<h2>{{$store.getters.moreAgestu(24)}}</h2>


<!-- mutations传递参数 -->
 <!-- 传递一个参数 -->
  <button @click="MthClick(10)">mutations传递参数</button>
 
 <!-- 传递一个对象 -->
 <button @click="StuClick()">添加学生</button>

<!-- App内容：info对象的内容是否是响应式的 -->
<h2>{{$store.state.info}}</h2>
<button @click="xiugaixinxi">修改响应式信息做法(因为修改的属性是一初始化的时候state便存在的属性)</button>



    <!--响应式，当数据发生变化，界面跟着一起变化-->

    <!--增加属性响应式信息正确做法-->
    <h2>{{$store.state.info}}</h2>
    <button @click="xiugaixinxi1">增加属性响应式信息错误做法</button>


    <!--增加属性响应式信息正确做法-->
    <h2>{{$store.state.info}}</h2>
<button @click="xiugaixinxi2">增加属性响应式信息正确做法</button>

    <!--删除属性的响应式测试-->
    <h2>{{$store.state.info}}</h2>
    <button @click="xiangyingshi3">删除属性的响应式测试</button>

    <!--正确删除属性的响应式测试-->
    <h2>{{$store.state.info}}</h2>
    <button @click="xiangyingshi4">正确删除属性的响应式测试</button>

    <!-- 异步测试 -->
 <h2>{{$store.state.info}}</h2>
    <button @click="yibuceshi">异步测试</button>

<!-- 异步正确操作 -->
 <h2>{{$store.state.info}}</h2>
    <button @click="yibuceshi1">异步测试通过Action--->mutation</button>

<!-- modules操作 -->
<!-- 这里直接从.a是因为，模块中的属性会对应的插入vux实例中的对应属性 -->
<h2>{{$store.state.a.name}}</h2>

<!-- modules中的mutations属性 -->
<button @click="Mthaa">modules中的mutations属性</button>

<!-- modules中的getter属性 -->
<h2>{{$store.getters.fullname}}</h2>

<!-- 测试modules中的将getter函数做属性 -->
<h2>{{$store.getters.fullname1}}</h2>

<!-- 测试在modules中的getter函数和Vux示例中的state做参数传入 -->
<h2>{{$store.getters.fullname2}}</h2>

<!-- 测试modules中的action -->
<button @click="syncaa">测试modules中的action</button>
 </div>
</template>



<script>
  //这种方式导入必须 这个文件内有 export default
import HelloVuex1 from './components/HelloVuex1'

  //普通导出方式要进行导入
import {INCREMENT} from './store/mutations-types'
//然后在下面用通过这个给mutation发送消息的时候就可以直接将这个常量引入


export default {
  name: 'App',
  data () {
    return {
      message:'App组件',
      counter:0
    }
  },
  computed: {
    selecrStundent(){
      return this.$store.state.students.filter(s=>{
        return s.age>17
      })
    }
  },
  components: {
    HelloVuex1

  },

//也就是说通过上面监听一个事件调用下面的方法  (action)
//下面这个方法addition提交到 mutations
//然后再通过mutations修改states
  methods: {
    syncaa(){
        this.$store.dispatch('AupdateName')
    },
    Mthaa(){
  this.$store.commit('updateName11','lisi')
},

    //传递参数给Mutations
    MthClick(count){
      this.$store.commit('Mtexf',count)
    },
    StuClick(){
      const stu = {id:1114,name:'alan',age:100}
      //直接将这个对象传进去  
      this.$store.commit('addStudent',stu)
    }
    ,
    addition(){
      this.$store.commit('increment')
    },
    subtraction(){
      this.$store.commit('decrement')
    },

    xiugaixinxi(){
      this.$store.commit('xiangyingshi')
    },
    xiugaixinxi1(){
      this.$store.commit('xiangyingshi1')
    },

    xiugaixinxi2(){
      this.$store.commit('xiangyingshi2')
    },
    xiangyingshi3(){
      this.$store.commit('xiangyingshi3')
    },
    xiangyingshi4(){
      this.$store.commit('xiangyingshi4')
    },
    yibuceshi(){
      this.$store.commit('yibucaozuo')
    },

    //想办法让其经过Action
    yibuceshi1(){
      //要知道发送的请求是否完成 ，可以通过一个回调函数
      //但是这样的做法不够优雅   下面准备了一个更优雅的办法
      // this.$store.dispatch('aUpdateInfo',{
      //   message: '我是携带的参数',
      //   success:()=>{
      //     console.log('里面已经完成了')
      //   }

      // })

      //更优雅的做法
      this.$store
      .dispatch('aUpdateInfo',{height:'1.00'})
      .then(res=>console.log(res))
    
    }

    
  }
}
</script>

<style>
</style>
